<template>
  <section class="upload-info-type-table">
    <el-table
      ref="multipleTable"
      stripe
      :data="tableData || []"
      :empty-text="tableData === null ? '加载中...' : '暂无数据'"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="编号" width="160">
        <template slot-scope="scope">
          <span class="tag-serial">{{ scope.row.serialNumber }}</span>
          <el-tag v-if="scope.row.forceBills" type="danger"> 无核对 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="公司名">
      </el-table-column>
      <el-table-column prop="industry" label="所属行业"> </el-table-column>
      <el-table-column prop="payTaxesType" label="纳税人类型">
        <template slot-scope="scope">
          {{ payTaxesTypeList[scope.row.payTaxesType] }}
        </template>
      </el-table-column>
      <el-table-column prop="accountingManager" label="会计负责人">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="weChartAccount" label="微信号"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ getStatusText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 8"
            type="primary"
            icon="el-icon-s-promotion"
            size="mini"
          >
            微信催办
          </el-button>
          <el-button
            v-if="scope.row.status === 10"
            type="success"
            icon="el-icon-view"
            size="mini"
            @click.native="onVoucherDetail(scope.row)"
          >
            查看凭证
          </el-button>
          <el-button
            v-if="scope.row.status === 10"
            type="primary"
            icon="el-icon-s-promotion"
            size="mini"
            @click.native="pushWxTax(scope.row)"
          >
            微信推送
          </el-button>
          <el-button
            v-if="scope.row.status === 9"
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click.native="onVoucherDetail(scope.row, 'edit')"
          >
            编辑凭证
          </el-button>
          <el-button
            v-if="scope.row.status === 8"
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click.native="onManualComplete(scope.row)"
          >
            手动完善
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="pagination"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      @current-change="currentPageChange"
    >
    </el-pagination>
  </section>
</template>

<script>
import map from "@/components/map";
import clone from 'clone';
import { delObjNullKey } from "@/components/utiles";

export default {
  components: {},
  props: {
    searchParams: {
      type: Object,
      deafault() {
        return {};
      },
    },
    name: {
      type: String,
    },
    type: {
      type: Number,
    },
    activedName: {
      type: String,
    },
  },
  data() {
    return {
      total: 0,
      tableData: null,
      currentPage: 1,
      pageSize: 20,
      smartBillStatusList: map.accountStatusList.slice(7, 11),
      payTaxesTypeList: map.payTaxesTypeList,
      timmerId: null
    };
  },
  created() {
    const { activedName } = this;
    this.nowTabLoad(activedName);
    this.setTimeoutLoadData();
  },
  destroyed() {
      if (this.timmerId) {
          window.clearTimeout(this.timmerId);
      }
  },
  watch: {
    activedName(n, o) {
      this.nowTabLoad(n);
    },
  },
  methods: {
    pushWxTax(data){
      const params = {
        cName: data.companyName,
        bName: data.bCompanyName
      }
      this.$http.get("/smart/wxPush", { params })
      .then((res) => {
        this.$message.success('推送成功！');
      }).catch(() => {
        this.$message.error('推送失败，请重试~');
      });
    },
    onVoucherDetail(data, type) {
      localStorage.setItem("voucherDetail", JSON.stringify(data));
      this.$router.push({
        name: "voucherDetail",
      });
    },
    onManualComplete(data, type) {
      localStorage.setItem("voucherDetail", JSON.stringify(data));
      this.$router.push({
        name: "smartManualComplete",
      });
    },
    nowTabLoad(nowTab) {
      if (this.name === nowTab && !(this.tableData || []).length) {
        this.loadData();
      }
    },
    loadData(isReset = false) {
      const { searchParams, pageSize, currentPage, type } = this;
      let sParams = searchParams;

      let status = [];
      if (searchParams.status.length === 0) {
        this.smartBillStatusList.forEach(item => {
          status.push(item.value);
        });
        sParams = clone(searchParams);
        sParams.status = status;
      }

      const params = {
        ...delObjNullKey(sParams),
        accuracyType: type,
        pageSize,
        pageNumber: isReset ? 1 : currentPage,
        intelligentAccounting: true,
      };
      this.$http.post("/accountBills/getCompanies", params).then((res) => {
        if (isReset) {
          this.currentPage = 1;
        }
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },

    /**
     * 定时请求列表数据
     */
    setTimeoutLoadData() {
      this.timmerId = window.setTimeout(() => {
        this.loadData();
        this.setTimeoutLoadData();
      }, 2000);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 批量核对
     */
    checkMany() {},

    /**
     * 翻页触发
     *
     * @param {Number} pageNumber 页码
     */
    currentPageChange() {
      this.loadData();
    },

    /**
     * 将状态编码转为文字
     *
     * @param {Number} status 状态码
     */
    getStatusText(status) {
      let result = '';
      map.accountStatusList.some(item => {
        if (item.value === status) {
          result = item.label;
          return true;
        }
      });
      return result;
    },

    // created() {
    //   const { activedName } = this;
    //   this.nowTabLoad(activedName);
    // },
    // watch: {
    //   activedName(n, o) {
    //     this.nowTabLoad(n);
    //   },
    // },
    // methods: {
    //   onVoucherDetail(serialNumber, type) {
    //     this.$router.push({
    //       name: "voucherDetail",
    //       query: {
    //         serialNumber,
    //         isEdit: type === "edit",
    //       },
    //     });
    //   },
    //   nowTabLoad(nowTab) {
    //     if (this.name === nowTab && !this.tableData.length) {
    //       this.loadData();
    //     }
    //   },
    //   loadData(isReset = false) {
    //     const { searchParams, name, pageSize, currentPage } = this;

    //     const params = {
    //       ...searchParams,
    //       type: name,
    //       pageSize,
    //       pageNumber: isReset ? 1 : currentPage,
    //     };
    //     this.$http
    //       .get("/bills/getList", {
    //         params,
    //       })
    //       .then((res) => {
    //         if (isReset) {
    //           this.currentPage = 1;
    //         }
    //         this.total = res.data.total;
    //         this.tableData = res.data.list;
    //       });
    //   },
    //   toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach((row) => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },
    //   handleSelectionChange(val) {
    //     this.multipleSelection = val;
    //   },

    //   /**
    //    * 批量核对
    //    */
    //   checkMany() {},

    //   /**
    //    * 翻页触发
    //    *
    //    * @param {Number} pageNumber 页码
    //    */
    //   currentPageChange() {
    //     this.loadData();
    //   },
    // },
  }
};
</script>

<style lang="less" scoped>
.upload-info-type-table {
  padding: 0 10px;
  .top-line {
    padding-bottom: 10px;
  }
  .pagination {
    text-align: right;
    padding: 20px 0 0;
  }

  .tag-serial {
    margin-right: 10px;
  }
}
</style>